<template>
  <el-form>
    <el-form-item label="新密码" prop="password">
      <el-input v-model="user.password" type="password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="验证码" prop="verificationCode">
      <el-row :gutter="20">
        <el-col span="20">
          <el-input v-model="user.verificationCode" type="text"></el-input>
        </el-col>
        <el-col span="4" :style="{'position':'absolute','right':'0'}">
          <el-button type="text" @click.prevent="sendCode()">短信验证</el-button>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item :style="{'text-align':'right'}">
      <el-button type="primary" @click.prevent="resetPwd()">修改</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { reactive, defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
import { sendVerificationCode, resetPassword } from '@/api/user'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'ResetPassword',
  setup () {
    const sotre = useStore()
    const user = reactive({
      phone: sotre.getters.getUser.phone,
      password: '',
      verificationCode: ''
    })
    const sendCode = async () => {
      if (user.phone === '') {
        return
      }
      const resp = await sendVerificationCode({
        sendType: 0,
        phone: user.phone,
        codeType: 1
      })
      if (resp.status === 200 && resp.data.code === 0) {
        ElMessage({
          message: '发送成功',
          type: 'success',
          duration: 1500,
          offset: 90
        })
        return
      }
      ElMessage({
        message: resp.data.msg,
        type: 'error',
        offset: 90
      })
    }
    const resetPwd = async () => {
      const resp = await resetPassword({
        sendType: 0,
        phone: user.phone,
        verificationCode: user.verificationCode,
        password: user.password,
        codeType: 1
      })
      if (resp.status === 200 && resp.data.code === 0) {
        ElMessage({
          message: '更新成功',
          type: 'success',
          duration: 1500,
          offset: 90
        })
        return
      }
      ElMessage({
        message: resp.data.msg,
        type: 'error',
        offset: 90
      })
    }
    return {
      user,
      sendCode,
      resetPwd
    }
  }
})
</script>

<style scoped>

</style>
